<template>
  <view class="ui-page ui-page__scroll">
    <uiCellGroup title="基本">
      <uiCell>
        <uiCheckbox v-model="isChecked">测试</uiCheckbox>
      </uiCell>
    </uiCellGroup>
    <uiCellGroup title="禁用状态">
      <uiCell>
        <uiCheckbox v-model="isChecked" disabled>复选框</uiCheckbox>
      </uiCell>
      <uiCell>
        <uiCheckbox v-model="isChecked1" disabled>复选框</uiCheckbox>
      </uiCell>
    </uiCellGroup>
    <uiCellGroup title="自定义形状">
      <uiCell>
        <uiCheckbox v-model="isChecked1" shape="square">自定义形状</uiCheckbox>
      </uiCell>
    </uiCellGroup>
    <uiCellGroup title="自定义颜色">
      <uiCell>
        <uiCheckbox v-model="isChecked1" checkedColor="green">自定义颜色</uiCheckbox>
      </uiCell>
    </uiCellGroup>
    <uiCellGroup title="自定义大小">
      <uiCell>
        <uiCheckbox v-model="isChecked1" shape="square" icon-size="48">自定义大小</uiCheckbox>
      </uiCell>
    </uiCellGroup>
    <uiCellGroup title="禁用文本点击">
      <uiCell>
        <uiCheckbox v-model="isChecked1" shape="square" label-disabled>禁用文本点击</uiCheckbox>
      </uiCell>
    </uiCellGroup>
    <uiCellGroup title="复选框组">
      <uiCheckboxGroup v-model="checkGroup">
        <uiCell>
          <uiCheckbox name="a" shape="square">复选框组a</uiCheckbox>
        </uiCell>
        <uiCell>
          <uiCheckbox name="b" shape="square">复选框组b</uiCheckbox>
        </uiCell>
      </uiCheckboxGroup>
      <uiCell title="复选框组的值" :value="checkGroup.toString()"></uiCell>
    </uiCellGroup>
    <uiCellGroup title="水平排列">
      <uiCell>
        <uiCheckboxGroup v-model="checkGroup" direction="horizontal">
          <uiCheckbox name="a" shape="square">复选框组a</uiCheckbox>
          <uiCheckbox name="b" shape="square">复选框组b</uiCheckbox>
        </uiCheckboxGroup>
      </uiCell>
    </uiCellGroup>
    <uiCellGroup title="限制最大数">
      <uiCheckboxGroup v-model="checkGroup" :max="2">
        <uiCell>
          <uiCheckbox name="a" shape="square">复选框组a</uiCheckbox>
        </uiCell>
        <uiCell>
          <uiCheckbox name="b" shape="square">复选框组b</uiCheckbox>
        </uiCell>
        <uiCell>
          <uiCheckbox name="c">复选框组c</uiCheckbox>
        </uiCell>
      </uiCheckboxGroup>
      <uiCell title="复选框组的值" :value="checkGroup.toString()"></uiCell>
    </uiCellGroup>
    <!-- <uiCellGroup title="自定义图标">
      <uiCell>
        <uiCheckbox v-model="isChecked1" shape="square">
          自定义图标
          <template v-slot:icon>
            <image
              :src="isChecked1 ? activeIcon : inactiveIcon"
              mode="widthFix"
              style="height : 1em;"
            />
          </template>
        </uiCheckbox>
      </uiCell>
    </uiCellGroup> -->
  </view>
</template>

<script>
import uiCell from "@/components/base/cell/index.vue";
import uiCellGroup from "@/components/base/cell-group/index.vue";

import uiCheckbox from "components/base/checkbox/index";
import uiCheckboxGroup from "components/base/checkbox-group/index";
export default {
  name: "demoCheckboxComponentPage",
  components: {
    uiCellGroup,
    uiCell,
    uiCheckboxGroup,
    uiCheckbox
  },
  data() {
    return {
      isChecked: false,
      isChecked1: true,
      checkGroup: ["b"],
      activeIcon: "https://img.yzcdn.cn/vant/user-active.png",
      inactiveIcon: "https://img.yzcdn.cn/vant/user-inactive.png"
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss"></style>
